<template>
  <view class="container">
    <sc-navbar back title="套包详情"></sc-navbar>
    <glo-gutter>
      <view class="detail-img">
        <sc-image height="100%" :src="detailData.packageImageAddress" width="100%" round="8"></sc-image>
      </view>
      <glo-chunk>
        <sc-flex ai="center" col-gap="23">
          <glo-title title="套包详细信息"></glo-title>
          <glo-tag text="已使用"></glo-tag>
        </sc-flex>
        <glo-info mt="13" :info="getInfo(detailData.info)" :label-style="{
          width: '175rpx',
          fontSize: '23rpx',
          lineHeight: '34rpx',
        }"></glo-info>
      </glo-chunk>
      <glo-include name="所含产品">
        <glo-chunk v-for="item in detailData.list" :key="item.id" shadow @click="handleDetail(item)">
          <sc-flex ai="center" jc="between">
            <glo-title :title="`${item.productName}【${item.tailorismName}】`"></glo-title>
            <sc-icon name="arrow-right" size="20"></sc-icon>
          </sc-flex>
          <sc-flex ai="center" col-gap="17" mt="20">
            <sc-image :src="item.boardImageAddress" height="90" width="90"></sc-image>
            <glo-info :info="getItemInfo(item)"></glo-info>
          </sc-flex>
        </glo-chunk>
      </glo-include>
    </glo-gutter>
    <sc-flex col-gap="45" jc="center" padding="150rpx 0 30rpx">
      <sc-button height="75" text="上传合格证" type="white" width="232" @click="toUploadCertificate"></sc-button>
      <!-- <sc-button height="75" text="编辑" type="white" width="187"></sc-button> -->
      <sc-button height="75" text="使用记录" type="white" width="200" @click="toUsageRecord"></sc-button>
    </sc-flex>
  </view>
</template>
<script setup>
import { useTemporaryStore } from "@/store/temporary";
const temporaryStore = useTemporaryStore();
const getInfo = (item) => {
  return [
    {
      type: "single",
      label: "套包名称",
      value: item.packageName,
    },
    {
      type: "single",
      label: "条码",
      value: item.packageBarcode,
    },
    {
      type: "single",
      label: "套包编号",
      value: item.packageCode,
    },
    {
      type: "single",
      label: "手术类型",
      value: item.surgeryType,
    },
    {
      type: "single",
      label: "商品大类",
      value: item.productCategory,
    },
    {
      type: "single",
      label: "所含数量",
      value: item.containCount,
    },
    {
      type: "single",
      label: "品牌",
      value: item.brandName,
    },
    {
      type: "single",
      label: "仓库",
      value: item.warehouseName,
    },
    {
      type: "single",
      label: "货位",
      value: item.location,
    },
  ];
};
const getItemInfo = (item) => {
  return [
    {
      type: "multiple",
      columns: "1.2fr 1fr",
      list: [
        {
          type: "single",
          label: "商品编号",
          value: item.tailorismCode || "-",
        },
        {
          type: "single",
          label: "数量",
          value: item.containCount || "-",
        },
      ],
    },
    {
      type: "multiple",
      columns: "1.2fr 1fr",
      list: [
        {
          type: "single",
          label: "规格",
          value: item.specifications || "-",
        },
        {
          type: "single",
          label: "型号",
          value: item.model || "-",
        },
      ],
    },
    {
      type: "multiple",
      columns: "1.2fr 1fr",
      list: [
        {
          type: "single",
          label: "批号",
          value: item.productBatchNumber || "-",
        },
        {
          type: "single",
          label: "追踪码",
          value: item.trackingCode || "-",
        },
      ],
    },
    {
      type: "multiple",
      columns: "1.2fr 1fr",
      list: [
        {
          type: "single",
          label: "生产日期",
          value: item.productionDate || "-",
        },
        {
          type: "single",
          label: "有效期限",
          value: item.validityDate || "-",
        },
      ],
    },

    {
      type: "single",
      label: "商品来源",
      value: item.productSubcategory || "-",
    },
    {
      type: "single",
      label: "注册证号",
      value: item.registrationCertificateNumber || "-",
    },

    {
      type: "single",
      label: "厂家",
      value: item.manufacturerName || "-",
    },
    {
      type: "single",
      label: "UDI条码",
      value: item.udiCode || "-",
    },
  ];
};
const detailData = reactive({
  info: {},
  list: [],
  total: 0,
  params: {
    pageNo: 1,
    pageSize: 10,
  },
});
onLoad(async ({ id }) => {
  const res = await _api.getTaoBaoDetail(id);
  detailData.info = res;
  detailData.list = res.productEntityManagementRespVOList;
});
const handleDetail = (item) => {
  temporaryStore.setCommodity(item);
  uni.navigateTo({
    url: `/subTaoBao/pages/commodityDetail`,
  });
};
const toUsageRecord = () => {
  uni.navigateTo({
    url: "/subTaoBao/pages/usageRecord",
  });
};
const toUploadCertificate = () => {
  temporaryStore.setCertificate({
    nailboxCode: detailData.info.packageCode,
    boardCode: undefined,
  });
  uni.navigateTo({
    url: "/subPublic/pages/qualifiedCertificate",
  });
};
</script>
<style lang="scss">
page {
  background: $color-bg;
}
</style>
<style lang="scss" scoped>
.detail-img {
  width: 100%;
  height: 338rpx;
  border-radius: 8rpx;
}

.detail-info {
  padding: 17rpx 25rpx;
  border-radius: 15rpx;
  background: #ffffff;
}
</style>
